// ; 企业性质占比
(function() {
	let myChart = echarts.init(document.querySelector('.top .top_L .charts1 '));
	let option = {
		title: {
			text: '企业性质占比',
			left: 'center',
			top: 20,
			textStyle:{
				color:'#fff'
			}
		},
		tooltip: {
			trigger: 'item',
			formatter: '{a} <br/>{b} : {c} ({d}%)'
		},
		legend: {
			show: false,
			left: 'center',
			top: 'bottom',
			data: ['事业单位', '民营企业', '政府机关', '国企', '外资(欧美)', '外资(非欧美)', '合资', '港澳合资']
		},
		toolbox: {
			show: false,
		},
		series: [{
			name: '面积模式',
			type: 'pie',
			radius: [60, 110],
			center: ['50%', '50%'],
			roseType: 'area',
			data: [{
					value: 10,
					name: '事业单位'
				},
				{
					value: 5,
					name: '民营企业'
				},
				{
					value: 15,
					name: '政府机关'
				},
				{
					value: 25,
					name: '国企'
				},
				{
					value: 20,
					name: '外资(欧美)'
				},
				{
					value: 35,
					name: '外资(非欧美)'
				},
				{
					value: 30,
					name: '合资'
				},
				{
					value: 40,
					name: '港澳合资'
				}
			]
		}]

	};
	myChart.setOption(option);
	window.addEventListener('resize', () => {
		myChart.resize();
	});
})();


// 所属行业占比
;
(function() {
	let myChart = echarts.init(document.querySelector('.top .top_C .charts2 '));
	let option = {
		title: {
			text: '所属行业占比',
			left: 'center',
			top: 20,
			textStyle:{
				color:'#fff'
			}
		},
		tooltip: {
			trigger: 'item',
			formatter: '{a} <br/>{b}: {c} ({d}%)'
		},
		legend: {
			show: false,
			orient: 'vertical',
			left: 10,
			data: ['金融', '电信', '制造业', '建筑房地产', '政府', '军队国防', '汽车', '教育培训', '电力资源', '住宿餐饮', '其他']
		},
		series: [{
			name: '',
			type: 'pie',
			radius: ['40%', '55%'],
			label: {
				formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',

				rich: {
					a: {
						color: '#999',
						align: 'center'
					},

					b: {
						fontSize: 16,
					},
					per: {
						color: '#eee',
						backgroundColor: '#334455',
						padding: [3, 4],
						borderRadius: 2
					}
				}
			},
			data: [{
					value: 200,
					name: '金融'
				},
				{
					value: 310,
					name: '电信'
				},
				{
					value: 234,
					name: '制造业'
				},
				{
					value: 135,
					name: '建筑房地产'
				},
				{
					value: 158,
					name: '政府'
				},
				{
					value: 335,
					name: '军队国防'
				},
				{
					value: 310,
					name: '汽车'
				},
				{
					value: 234,
					name: '教育培训'
				},
				{
					value: 135,
					name: '电力资源'
				},
				{
					value: 548,
					name: '住宿餐饮'
				},
				{
					value: 335,
					name: '其他'
				}
			]
		}]
	};
	myChart.setOption(option);
	window.addEventListener('resize', () => {
		myChart.resize();
	});
})();


//企业纳税排行
(function() {
	const dom = document.querySelector(".top_R .box_content .center")
	let data = [{
			id: 1,
			icon: 'icon/1919.png',
			name: '1919酒类直供',
			nashui: '233.25'
		},
		{
			id: 2,
			icon: 'icon/deili.png',
			name: '得力',
			nashui: '218.64'
		},
		{
			id: 3,
			icon:'icon/haidilao.png',
			name: '海底捞',
			nashui: '186.35'
		},
		{
			id: 4,
			icon: 'icon/haixin.png',
			name: '海信',
			nashui: '152.47'
		},
		{
			id: 5,
			icon: 'icon/jimi.png',
			name: '极米',
			nashui: '144.32'
		}
	]

	data.map((v, i) => {
		return `<li><span>${i+1}</span><span><img src="${v.icon}"/></span><span>${v.name}</span><span>${v.nashui}</span></li>`
	}).forEach(v => {
		dom.innerHTML += v
	})


})()


//企业生产规模统计

;
(function() {
	let myChart = echarts.init(document.querySelector('.b_R_B .charts6'));
	let option = {
		color: '#64b3ca',
		title: {
			text: '企业生产规模统计',
			left: 'center',
			textStyle:{
				color:'#fff'
			}
		},
		tooltip: {
			trigger: 'axis'
		},
		legend: {
			show: false
		},
		toolbox: {
			show: false
		},
		grid: {
			top: '19%',
			right: '10%',
			left: '10%',
			bottom: '10%',
			containLabel:true
		},
		xAxis: {
			name: '人数',
			type: 'category',
			axisLine: {
				lineStyle: {
					color: '#fff'
				}
			},
			boundaryGap: false,
			data: ['50', '50~80', '80~160', '160~499', '499~699', '699~1099', '1099~2099', '4099', '6099']
		},
		yAxis: {
			max:60,
			type: 'value',
			name: '数量家',
			axisLine: {
				lineStyle: {
					color: '#fff'
				}
			},
			axisLabel: {
				formatter: '{value}'
			}
		},
		series: [{
			name: '数量',
			type: 'line',
			data: [45, 40, 43, 37, 32, 34, 30, 30, 30],
			markPoint: {
				data: [{
						name: '',
						value: 45,
						xAxis: 0,
						yAxis: 45
					},
					{
						name: '',
						value: 40,
						xAxis: 1,
						yAxis: 40
					},
					{
						name: '',
						value: 43,
						xAxis: 2,
						yAxis: 43
					},
					{
						name: '',
						value: 37,
						xAxis: 3,
						yAxis: 37
					},
					{
						name: '',
						value: 32,
						xAxis: 4,
						yAxis: 32
					},
					{
						name: '',
						value: 34,
						xAxis: 5,
						yAxis: 34
					},
					{
						name: '',
						value: 30,
						xAxis: 6,
						yAxis: 30
					},
					{
						name: '',
						value: 30,
						xAxis: 7,
						yAxis: 30
					},
					{
						name: '',
						value: 30,
						xAxis: 8,
						yAxis: 30
					}
				]
			}
		}]
	};

	myChart.setOption(option);
	window.addEventListener('resize', () => {
		myChart.resize();
	});
})();


// 企业投资总额
;
(function() {
	let myChart = echarts.init(document.querySelector('.b_R_T .charts5 '));
	let option = {
		title: {
			text: '企业投资总额(亿元)',
			textStyle:{
				color:'#fff'
			},
			left: 'center'
		},
		grid: {
			left: '12%',
			top: '15%',
			bottom: '12%',
			right: '8%'
		},
		tooltip: {
			trigger: 'axis',
			formatter: (op) => {
				const o = op[0]
				return `${o.name}<br/>${o.marker}企业投资总额 ${o.value} 亿元`
			}
		},
		xAxis: {
			data: ['交通', '工业', '农业', '林业', '水利', '生态环保', '商业服务', '科技', '文化'],
			axisTick: {
				show: false
			},
			axisLine: {
				lineStyle: {
					color: '#ccc',
					width: 1 //这里是为了突出显示加上的
				}
			},
			splitLine: {
				show: true,
				lineStyle: {
					color: 'rgba(0, 0, 0, 0.5)',
					width: 0.5,
					type: 'dashed'
				}
			},
			axisLabel: {
				textStyle: {
					color: '#ccc',
					fontSize: 12
				}
			}
		},
		yAxis: [{
			axisTick: {
				show: true
			},
			axisLine: {
				lineStyle: {
					color: '#ccc',
					width: 1 //这里是为了突出显示加上的
				}
			},
			axisLabel: {
				textStyle: {
					color: '#ccc'
				}
			},
			splitArea: {
				areaStyle: {
					color: 'rgba(0,0,0,.5)'
				}
			},
			splitLine: {
				show: true,
				lineStyle: {
					color: 'rgba(0, 0, 0, 0.5)',
					width: 0.5,
					type: 'dashed'
				}
			}
		}],
		series: [{
			type: 'pictorialBar',
			barCategoryGap: '0%',
			symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
			label: {
				show: true,
				position: 'top',
				distance: 1,
				color: '#08DFFE',
				fontWeight: '0',
				fontSize: 15,
			},
			itemStyle: {
				normal: {
					color: {
						type: 'linear',
						x: 0,
						y: 0,
						x2: 0,
						y2: 1,
						colorStops: [{
								offset: 0,
								color: '#9A11FF'
							},
							{
								offset: 1,
								color: '#08DFFE'
							}
						],
						global: false //  缺省为  false
					}
				},
				emphasis: {
					opacity: 1
				}
			},
			data: [160, 25, 18, 12, 19, 32, 11, 26, 56]
		}]
	};
	myChart.setOption(option);
	window.addEventListener('resize', () => {
		myChart.resize();
	});
})();


// 岗位需求统计
;
(function() {
	let colorss = ['#621d87', '#c80a62', '#536c7b', '#29a7e1', '#621d87', '#c80a62', '#536c7b', '#29a7e1', '#621d87',
		'#c80a62', '#536c7b', '#29a7e1', '#621d87', '#c80a62', '#536c7b', '#29a7e1']
	let myChart = echarts.init(document.querySelector('.b_C_B .charts4'));
	let option = {
		title: {
			text: '岗位需求数量统计',
			left: 'center',
			textStyle:{
				color:'#fff'
			}
		},
		tooltip: {
			trigger: 'axis',
			axisPointer: { // 坐标轴指示器，坐标轴触发有效
				type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
			}
		},
		grid: {
			left: '3%',
			right: '4%',
			bottom: '3%',
			containLabel: true
		},
		xAxis: [{
			type: 'category',
			data: ['Java研发', 'net研发', 'C++研发', '架构师', '需求分析师', '测试工程师', 'QA', '人力资源', '销售专员'],
			axisTick: {
				alignWithLabel: true
			},
			
			axisLine: {
				lineStyle: {
					color: '#ccc'
				}
			},
		}],
		yAxis: [{
			type: 'value',
			name: '数量（人）',
			axisLine: {
				lineStyle: {
					color: '#ccc'
				}
			},
		}],
		series: [{
			name: '人数',
			type: 'bar',
			barWidth: '20',
			data: [200, 72, 120, 170, 150, 100, 130, 150, 200],

			itemStyle: {
				normal: {
					color: (op) => {
						let num = op.length;
						return colorss[op.dataIndex]
					}
				}
			}
		}]
	};

	myChart.setOption(option);
	window.addEventListener('resize', () => {
		myChart.resize();
	});
})();

// 年度GDP总量(亿)
;
(function() {
	let myChart = echarts.init(document.querySelector('.b_C_T .charts3'));
	let option = {
		title: {
			text: '年度GDP总量(亿)',
			left: 'center',
			textStyle:{
				color:'#fff'
			}
		},
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				lineStyle: {
					color: '#ccc'
				}
			}
		},
		legend: {
			show: false,
		},
		grid: {
			left: '3%',
			right: '4%',
			bottom: '3%',
			containLabel: true
		},
		xAxis: [{
			type: 'category',
			boundaryGap: false,
			axisLine: {
				lineStyle: {
					color: '#ccc'
				}
			},
			data: ['2012', '2013', '2014', '2015', '2016', '2017', '2018', '2019']
		}],
		yAxis: [{
			type: 'value',
			name: '总量（亿）',
			axisTick: {
				show: false
			},
			axisLine: {
				lineStyle: {
					color: '#ccc'
				}
			},
			axisLabel: {
				margin: 10,
				textStyle: {
					fontSize: 14
				}
			},
			splitLine: {
				lineStyle: {
					color: '#ccc'
				}
			}
		}],
		series: [{
			name: '年度GDP',
			type: 'line',
			smooth: true,
			symbol: 'circle',
			symbolSize: 15,
			showSymbol: true,
			lineStyle: {
				normal: {
					width: 5
				}
			},

			areaStyle: {
				normal: {
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
						offset: 0,
						color: 'rgba(30,162,175,.8)'
					}, {
						offset: 0.8,
						color: 'rgba(30,162,175,.1)'
					}], false),
					shadowColor: 'rgba(30,162,175,.3)',
					shadowBlur: 10
				},
			},
			itemStyle: {
				normal: {
					color: 'rgba(30,162,175,1)',
					shadowColor: 'rgba(30,162,175,1)',
					shadowBlur: 10
				},
				emphasis: {
					color: 'rgb(99,250,235)',
					borderColor: 'rgba(99,250,235,0.2)',
					extraCssText: 'box-shadow: 8px 8px 8px rgba(0, 0, 0, 1);',
					borderWidth: 10
				}
			},
			data: [120, 110, 125, 145, 122, 165, 122, 220]
		}]
	};
	myChart.setOption(option);
	window.addEventListener('resize', () => {
		myChart.resize();
	});
})();


// ;
// (function () {
//   let myChart = echarts.init(document.querySelector(' '));
//   let option = {};
//   myChart.setOption(option);
//   window.addEventListener('resize', () => {
//     myChart.resize();
//   });
// })();
